<template>
  <diV class="person">
    <el-descriptions class="margin-top" title="用户信息" :column="1" :size="size" border :data="tableData">
    <template slot="extra" >
        <el-button type="primary" @click="handleEdit(tableData)">编辑 <i class="el-icon-edit"></i></el-button>
    </template>
    
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        用户名
      </template>
      {{ tableData.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-lock"></i>
        密码
      </template>
      {{ tableData.password }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-female"></i>
        性别
      </template>
      {{ tableData.sex }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-message"></i>
        邮箱
      </template>
      {{ tableData.email }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        手机号
      </template>
      {{ tableData.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        籍贯
      </template>
      {{ tableData.address }}
    </el-descriptions-item>
  </el-descriptions>

  <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%" >
        <el-form label-width="80px" size="small">
          <el-form-item label="用户名">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-input v-model="form.sex" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="籍贯">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
  </diV>
</template>

<script>
export default {
    data () {
      return {
        size: '',
        tableData:{
          id:'',
          username: '',
          password: '',
          sex: '',
          address: '',
          phone: '',
          email: '',
        },
        form: {},
        dialogFormVisible: false,
      };
    },
    created(){
      if(!this.$store.state.userInfo){
        this.$message.error("请登录后再进行查看！");
      }else{
        this.tableData = this.$store.getters.getUser
        console.log(this.tableData.id)
        this.load()
      }
      
    },
    methods: {
      load() {
        this.request.get("/user/check/" + this.tableData.id).then((response) => {
          console.log(response)
          this.tableData = response.data.data.list
        })
      },
      save() {
        this.request.post("/user/update", 
        {
          id: this.form.id,
          username: this.form.username,
          password: this.form.password,
          sex: this.form.sex,
          phone: this.form.phone,
          email: this.form.email,
          address: this.form.address
        }).then(response => {
          console.log(response)
          if (response.data.code === 200 || response.data.code === '200') {
            this.$message.success(" 保存成功 ")
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error(" 保存失败 ")
          }
        })
      },
      handleEdit(row) {
        this.form = row
        this.dialogFormVisible = true
      },
    }
}
</script>

<style>
.el-descriptions{
    text-align: center;
    margin: 0px auto;
    width: 400px;
    padding: 30px 35px 15px 35px;
}
</style>